<template>
	<view class="wrap">
		<view class="store_body">
			<view class="store_total">
				<view class="total_cell">
					<view class="tit_cell">
						<view class="tit">
							可结算金额(元)
						</view>
						<view class="icon" @click.stop="$refs.NoPopup.open()">
							<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1723109253581988.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="countbox">
						<view class="count">
							{{total}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="record_body">
			<view class="record_main">
				<view class="record_tit">
					<view class="icon"></view>
					<view class="tit">
						结算记录
					</view>
				</view>
				<block v-if="false">
					<view class="record_cell" v-for="(item,index) in 10" :key="index">
						<view class="cell_top">
							<view class="cell_tit">
								<view class="tit">
									订单号：123456789
								</view>
								<view class="time">
									2024-08-08 15:30
								</view>
							</view>
							<view class="total">
								+199
							</view>
						</view>
					</view>					
				</block>
				<EmptyBox text="这里什么都没有..."></EmptyBox>
			</view>
			
		</view>
		<view style="height: 80rpx;"></view>
		
		<uni-popup ref="NoPopup" type="center">
			<view class="NoPopup">
				<view class="titBox">
					<view class="tit">
						可结算金额
					</view>
				</view>
				<view class="inpbox">
					<view class="tit">
						可结算金额=已发货签收订单总金额-已结算
					</view>
				</view>
				<view class="No_btn" @click="$refs.NoPopup.close()">
					我知道了
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total:''
			};
		},
		onLoad(e) {
			this.total =  Number(e.total).toFixed(2)
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f6f6f6;
}
image{
	width: 100%;
	height: 100%;
}
.wrap{
	.store_body{
		padding: 0 32rpx;
		margin: 24rpx 0;
		.store_total{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			.total_cell{
				.tit_cell{
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					.tit{
						font-size: 28rpx;
						color: #666666;
					}
					.icon{
						width: 32rpx;
						height: 32rpx;
						margin-left: 12rpx;
					}
				}
				.countbox{
					display: flex;
					align-items: center;
					.count{
						font-weight: bold;
						font-size: 48rpx;
						color: #0D0D0D;
						margin-right: 10rpx;
					}
				}
				
			}
		}
	}
	
	.record_body{
		padding: 0 32rpx;
		.record_main{
			padding: 32rpx;
			padding-bottom: 0;
			background: #FFFFFF;
			border-radius: 14rpx;
			.record_tit{
				display: flex;
				align-items: center;
				.icon{
					width: 6rpx;
					height: 32rpx;
					background: #FF6030;
					margin-right: 8rpx;
				}
				.tit{
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}
			}
			.record_cell{
				padding: 30rpx 0;
				border-bottom: 2rpx solid #E4E4E4;
				.cell_top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.cell_tit{
						.tit{
							font-size: 28rpx;
							color: #333333;
						}
						.time{
							margin-top: 8rpx;
							font-size: 24rpx;
							color: #999999;
						}
					}
					.total{
						font-size: 36rpx;
						color: #FF6030;
					}
				}
			}
			.record_cell:last-child{
				border-bottom: 0;
			}
		}
	}
	.NoPopup{
		width: 85vw;
		padding: 40rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;
		.titBox{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			.tit{
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
			}
			.icon{
				position: absolute;
				right: -24rpx;
				top: -24rpx;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 80%;
					height: 80%;
				}
			}
		}
		.inpbox{
			display: flex;
			align-items: center;
			margin: 40rpx 0;
			.tit{
				// font-weight: bold;
				font-size: 28rpx;
				color: #666;
				margin-right: 16rpx;
			}
			input{
				flex: 1;
				padding: 18rpx 24rpx;
				text-align: center;
				background: #F5F5F5;
				border-radius: 8rpx;
				margin: 56rpx 0;
			}
		}
		
		.No_btn{
			background: linear-gradient( 98deg, #FFAD26 0%, #FE4E01 100%);
			border-radius: 44rpx;
			padding: 22rpx 0;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
}
</style>
